<template>
  <!-- 外围最大的盒子 -->
  <div class="detail">
    <!-- 卡片容器 -->
    <el-card class="mycard">

      <!-- 加上一个按钮 -->
      <el-button type="primary" @click="toPrint" v-if="activeName!=='first'">打印</el-button>
      <!-- 标签栏 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="登录账户设置" name="first">
          <!-- 表单 -->
          <el-form :model="form" label-width="100px" class="myform">
            <!-- 姓名区域 -->
            <el-form-item label="姓名">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <!-- 密码区域 -->
            <el-form-item label="密码">
              <el-input v-model="form.password" type="password"></el-input>
            </el-form-item>
            <!-- 按钮区域 -->
            <el-form-item>
              <el-button type="primary" @click="submit">更新</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个人详情" name="second">
          <userinfo></userinfo>
        </el-tab-pane>
        <el-tab-pane label="角公司设置" name="third">
          <jobinfo></jobinfo>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
// 导入员工基本信息请求
import { getBaseApi } from "@/api/user";
// 导入修改员工信息的接口请求
import {saveBaseApi} from '@/api/employess'
export default {
  data() {
    return {
      // 标签栏选中的类名
      activeName: "first",
      // form表单中的数据源
      form: {},
      // 访问员工数据需要id从路由路径上取
      id: this.$route.query.id,
    };
  },

  // 方法
  methods: {

      // 给打印按钮设置点击事件
    toPrint(){
      this.$router.push(`/employees/print?active=${this.activeName}`)
    },

    // 修改员工数据的方法
        async submit(){
            // 里面修改的参数就是this.form中保存的数据
             await saveBaseApi(this.form)
            //  提示用户
            this.$message.success('修改成功')
            //跳转回员工列表页
            this.$router.push('/employees')
        },

    // 定义一个获取员详情的方法
    async getBase() {
        // 发送请求协带路由上传递的id
      const res = await getBaseApi(this.id);
    //   保存到form对象中
      this.form = res.data.data;
    },
  },


  //注册组件
  components:{
    // 注册个人详情组件
    userinfo:()=>import('../components/userinfo.vue'),
    // 注册岗位信息组件
    jobinfo:()=>import('../components/jobinfo.vue')
  },


  // 页面一打开就调用
  created() {
    // 调用获取员工详情方法
    this.getBase();
  },
};
</script>

<style lang="scss">
.detail {
  margin: 20px;
  .myform {
    width: 400px;
    margin-left: 200px;
    margin-top: 40px;
  }
}
</style>
